|
|
DHTML Menu Builder Items IntroductionHere are some guidelines to start creating a project. In this section you will get familiar with the different items in DHTML Menu Builder that are used to create the menus.
For further and more detailed information you should take the Tutorial after reading this section.
It is a good idea that before you start creating your menus, you have all your documents done, and ready. Why? Because you'll have to tell DHTML Menu Builder where these files are located. This is not mandatory, but just a good idea, because you'll always be able to re-open your project and make any changes to it.
Now that we have everything ready, let's get started.
Creating menus in DHTML Menu Builder is so easy, there are only three steps required!
The first thing you should do is to set the Project Properties.
To access the project properties dialog, press the CTRL+P shortcut key.In the General section, enter you project name, such as My Web Menus, or whatever you want.
Now, to set the Local Path to the Root Web and Folder to store Compiled files parameters using the browse buttons.The Local Path to the Root Web should point to the folder where your default HTML document (or front page) is stored.
The Folder to store Compiled files, should be a folder inside the Root Web (could be the same if you want) where DHTML Menu Builder will store the compiled menus and all the resource files, such as images, used by the project.In the Document Containing the HotSpots field enter the file where your hotspots are defined.
In the Final HTML document enter the file that fully renders your page, including the hotspots. If this is the same as the above, just add it again.
If you use a server side rendered file, such as an ASP, PHP3 or SHTML file, you can type in this field the fully qualified URL to the file.If you don't set these fields, you will not be able to use the Hot Spot Editor, which is a great utility, integrated into DHTML Menu Builder, that will help you set the initial positions of your menus and attach the code that triggers the menus.
The files used by the HotSpot Editor must be standard HTML documents. You can also choose ASP and INC pages, but just make sure the all of them have the basic opening and closing tags: <html><body></body></html>
Select whether if you want your menus to be displayed using one of the pre-defined effects.
If the menus you're going to implement will be viewed from a local folder, instead of a web server, make sure you leave the Use Full Paths setting unchecked, otherwise check it.
In the Advanced section, choose which kind of code generation would you like to work with, selecting one of the options from the Code Optimization list.
Every time you start to work on a new project its recommend to use the DEBUG option. This will create a single commented-and-easy-to-read JavaScript file that can be easily debugged for problems.[2] The Groups
To create a group (or container) either click the Add Group
icon or press the F6 shortcut key.
A single project file must be used to store all the groups, because you can only call one .js file at a time. So if your page will display more than one pulldown menu, you must create, into the same project, one group for each menu. There's no limit on the number of groups a project file can have.
Just after creating a group, DHTML Menu Builder will let you change its name.
This name is just an internal reference, and it will be used by the script to identify it.
This name should not contain any special characters, such as spaces, commas, etcetera and you should not use it on any other item. Also it is very important to use unique names that do not refer to internal functions or variables... so be creative and use names that could hardly be used for any other thing.If you're using a DHTML based editor to create your pages, make sure you don't use the names assigned to images by the editor for your groups or commands. Having more than one element in the page with the same name will produce unpredictable results.
You've also the option to select what will trigger the menu, by selecting the appropriate event under the Triggered By list.
For the groups, the default action should be By Hovering, which means, when the mouse pointer moves over your hotspot.Once a group has been created, you can start setting its properties.
As a container, you can set the background color or image, the thickness of the border (if any) and the light and dark colors of the container's frame (or border).
This is a sample container or menu group, which properties have been set to have no background image, a gray background, a 1 point border with cyan light borders and dark blue for the darkest borders.
Please note that the frame color setting has no effect when the menus are viewed using the Netscape Navigator browser.
To set such properties, simply click the
button on tools toolbar.
Even when the groups don't display any text, you can set the default text style the commands should have when created. This will save you a lot of time.
You may want to check the Dialogs section to see how these property dialogs work.
Once the group has been created and the properties are set, you can start adding all the menu items (or commands) you want to display whenever this menu is shown.
For more information on group, click here.
[3] The menu items or commands
To add menu commands, simply click the Add Command
icon or use the F7 shortcut key.
Similar as when you added the group, DHTML Menu Builder will let you change the internal name of this particular item.
This name should not contain any special characters and you should not use it on any other item.Now, the Command Properties section becomes available and you can start setting the values which will change the appearance and behavior of the newly created command.
The Caption is the actual text that will be displayed as the item's description when the menu is shown.
If this command will be used to display another menu, that is, a cascading menu, you must click the Cascade button.
A list of available groups that can be displayed will be shown as target menus.If the item is a normal menu command, then you can use the Action text box to type any valid URL address. This address will be passed to the browser whenever this command is activated.
If the Action property will be used to execute some scripting command, make sure you precede the command with the javascript: prefix. For example, if you wish to display a dialog box, you should do it like this:
javascript:alert('Hello World');The Triggered By section will let you choose which event will send the URL to the browser, or in the case of cascade type commands, show the cascading menu.
For commands, the default action should be By Clicking.
Finally, use the four Style buttons, Color, Font, Cursor and Image to set these properties for the commands.Please note that the Cursor settings have no effect when the menus are viewed using the Netscape Navigator or Internet Explorer 5.0 for the Macintosh.
You may want to check the Dialogs section to see how these properties dialogs work.
For more information on commands, click here.
